// 导入变量文件
@import './variables.scss';

// 重置样式
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  height: 100%;
}

body {
  height: 100%;
  font-family: $font-family;
  font-size: $font-size-base;
  color: $text-color-primary;
  background-color: $background-color-base;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

#app {
  height: 100%;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: $border-color-extra-light;
}

::-webkit-scrollbar-thumb {
  background: $border-color-light;
  border-radius: $border-radius-base;
  
  &:hover {
    background: $border-color-base;
  }
}

// 清除浮动
.clearfix::after {
  content: '';
  display: table;
  clear: both;
}

// 文本省略
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.text-ellipsis-2 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.text-ellipsis-3 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

// 间距工具类
.m-0 { margin: 0 !important; }
.m-1 { margin: $spacing-small !important; }
.m-2 { margin: $spacing-medium !important; }
.m-3 { margin: $spacing-large !important; }
.m-4 { margin: $spacing-extra-large !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: $spacing-small !important; }
.mt-2 { margin-top: $spacing-medium !important; }
.mt-3 { margin-top: $spacing-large !important; }
.mt-4 { margin-top: $spacing-extra-large !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: $spacing-small !important; }
.mb-2 { margin-bottom: $spacing-medium !important; }
.mb-3 { margin-bottom: $spacing-large !important; }
.mb-4 { margin-bottom: $spacing-extra-large !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: $spacing-small !important; }
.ml-2 { margin-left: $spacing-medium !important; }
.ml-3 { margin-left: $spacing-large !important; }
.ml-4 { margin-left: $spacing-extra-large !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: $spacing-small !important; }
.mr-2 { margin-right: $spacing-medium !important; }
.mr-3 { margin-right: $spacing-large !important; }
.mr-4 { margin-right: $spacing-extra-large !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: $spacing-small !important; }
.p-2 { padding: $spacing-medium !important; }
.p-3 { padding: $spacing-large !important; }
.p-4 { padding: $spacing-extra-large !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: $spacing-small !important; }
.pt-2 { padding-top: $spacing-medium !important; }
.pt-3 { padding-top: $spacing-large !important; }
.pt-4 { padding-top: $spacing-extra-large !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: $spacing-small !important; }
.pb-2 { padding-bottom: $spacing-medium !important; }
.pb-3 { padding-bottom: $spacing-large !important; }
.pb-4 { padding-bottom: $spacing-extra-large !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: $spacing-small !important; }
.pl-2 { padding-left: $spacing-medium !important; }
.pl-3 { padding-left: $spacing-large !important; }
.pl-4 { padding-left: $spacing-extra-large !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: $spacing-small !important; }
.pr-2 { padding-right: $spacing-medium !important; }
.pr-3 { padding-right: $spacing-large !important; }
.pr-4 { padding-right: $spacing-extra-large !important; }

// 文本对齐
.text-left { text-align: left !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

// 浮动
.float-left { float: left !important; }
.float-right { float: right !important; }
.float-none { float: none !important; }

// 显示/隐藏
.d-none { display: none !important; }
.d-block { display: block !important; }
.d-inline { display: inline !important; }
.d-inline-block { display: inline-block !important; }
.d-flex { display: flex !important; }
.d-inline-flex { display: inline-flex !important; }

// Flex 布局
.flex-row { flex-direction: row !important; }
.flex-column { flex-direction: column !important; }
.flex-wrap { flex-wrap: wrap !important; }
.flex-nowrap { flex-wrap: nowrap !important; }
.flex-fill { flex: 1 1 auto !important; }
.flex-grow-0 { flex-grow: 0 !important; }
.flex-grow-1 { flex-grow: 1 !important; }
.flex-shrink-0 { flex-shrink: 0 !important; }
.flex-shrink-1 { flex-shrink: 1 !important; }

// 对齐
.justify-content-start { justify-content: flex-start !important; }
.justify-content-end { justify-content: flex-end !important; }
.justify-content-center { justify-content: center !important; }
.justify-content-between { justify-content: space-between !important; }
.justify-content-around { justify-content: space-around !important; }

.align-items-start { align-items: flex-start !important; }
.align-items-end { align-items: flex-end !important; }
.align-items-center { align-items: center !important; }
.align-items-baseline { align-items: baseline !important; }
.align-items-stretch { align-items: stretch !important; }

.align-content-start { align-content: flex-start !important; }
.align-content-end { align-content: flex-end !important; }
.align-content-center { align-content: center !important; }
.align-content-between { align-content: space-between !important; }
.align-content-around { align-content: space-around !important; }
.align-content-stretch { align-content: stretch !important; }

.align-self-auto { align-self: auto !important; }
.align-self-start { align-self: flex-start !important; }
.align-self-end { align-self: flex-end !important; }
.align-self-center { align-self: center !important; }
.align-self-baseline { align-self: baseline !important; }
.align-self-stretch { align-self: stretch !important; }

// 响应式工具类
@media (max-width: #{$mobile-breakpoint}) {
  .d-mobile-none { display: none !important; }
  .d-mobile-block { display: block !important; }
  .d-mobile-inline { display: inline !important; }
  .d-mobile-inline-block { display: inline-block !important; }
  .d-mobile-flex { display: flex !important; }
}

@media (min-width: #{$mobile-breakpoint + 1}) {
  .d-desktop-none { display: none !important; }
  .d-desktop-block { display: block !important; }
  .d-desktop-inline { display: inline !important; }
  .d-desktop-inline-block { display: inline-block !important; }
  .d-desktop-flex { display: flex !important; }
}

// 自定义样式
.card {
  background: #fff;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-base;
  padding: $spacing-medium;
  margin-bottom: $spacing-medium;
}

.page-header {
  background: #fff;
  padding: $spacing-medium;
  margin-bottom: $spacing-medium;
  border-radius: $border-radius-base;
  box-shadow: $box-shadow-base;
  
  .title {
    font-size: $font-size-large;
    font-weight: 600;
    color: $text-color-primary;
    margin-bottom: $spacing-small;
  }
  
  .description {
    color: $text-color-secondary;
    font-size: $font-size-small;
  }
}

.status-tag {
  display: inline-block;
  padding: 4px 8px;
  border-radius: $border-radius-base;
  font-size: $font-size-small;
  font-weight: 500;
  
  &.success {
    background: rgba($success-color, 0.1);
    color: $success-color;
  }
  
  &.warning {
    background: rgba($warning-color, 0.1);
    color: $warning-color;
  }
  
  &.danger {
    background: rgba($danger-color, 0.1);
    color: $danger-color;
  }
  
  &.info {
    background: rgba($info-color, 0.1);
    color: $info-color;
  }
}

// Element Plus 样式覆盖
.el-card {
  border: none;
  box-shadow: $box-shadow-base;
}

.el-table {
  .el-table__header th {
    background: $background-color-base;
    color: $text-color-primary;
    font-weight: 600;
  }
}

.el-form {
  .el-form-item__label {
    color: $text-color-primary;
    font-weight: 500;
  }
}

.el-button {
  &.is-disabled {
    opacity: 0.6;
  }
}

// 页面过渡动画
.page-enter-active,
.page-leave-active {
  transition: all 0.3s ease;
}

.page-enter-from {
  opacity: 0;
  transform: translateX(30px);
}

.page-leave-to {
  opacity: 0;
  transform: translateX(-30px);
}

// 路由过渡动画
.router-enter-active,
.router-leave-active {
  transition: all 0.3s ease;
}

.router-enter-from {
  opacity: 0;
  transform: translateY(30px);
}

.router-leave-to {
  opacity: 0;
  transform: translateY(-30px);
} 